<template style="width: 1920px; height: 1080px">

    <head>
        <title>游戏玩家社区</title>
<!--        <link href="../../style/theme/index.css">-->

    </head>

    <main>
        <div class="common-layout">
<!--                    导航栏  -->
                        <el-row>
                            <el-col :span="18"><div class="grid-content ep-bg-purple">
                                <el-menu mode="horizontal" router>
                                    <el-menu-item v-for="menuItem in menuList" :index="menuItem.path">{{ menuItem.label }}</el-menu-item>
                                </el-menu>
                            </div></el-col>
                            <el-col :span="4"><div class="grid-content ep-bg-purple">
                                <el-menu mode="horizontal" router>
                                    <el-menu-item v-for="menuItem in menuListUser" :index="menuItem.path">
                                        {{ menuItem.label }}
                                    </el-menu-item>
                                </el-menu>
                            </div></el-col>
                            <el-col :span="2"><div class="grid-content ep-bg-purple">
                                <div class="demo-basic--circle">
                                    <div class="block">
<!--                                        <el-avatar size="50" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />-->
                                        <el-avatar size="50">
                                            <img src="../../../public/pictures/icon/img.png" alt="头像">
                                        </el-avatar>
                                    </div>
                                </div>
                            </div></el-col>
                        </el-row>
<!--            <el-main style="background: #8cc5ff; width: 80vw; margin-left: 10vw">-->

                <!--                    主体内容 -----------------------------------------------------------------------------  -->

            <div style="width: 80vw; margin-left: 10vw">
                <router-view name="IndexIn" />
<!--                <IndexContent />-->
<!--                <PostEdit />-->
            </div>

<!--            </el-main>-->

        </div>

    </main>
    <div class="bottom-info">
    <p class="bottom-font">商务市场合作: xxxxxx.com.cn , 内容合作: sushi51@163.com.cn / QQ 1844612260 , 违法和不良信息举报电话: 010-00000000 邮箱: sushi51@163.com 网上有害信息举报专区</p>
    <p class="bottom-font">京ICP备16021487号-0 京公网安备0000000000000号 可信网站</p>
    </div>
</template>

<script setup>

import {ref} from "vue";
import IndexContent from "@/components/pages/front/IndexContent.vue";
import PostEdit from "@/components/pages/front/PostEdit.vue";



const menuList = ref([
    {id: 1, label: "首页", path: "/index"},
    {id: 2, label: "交流大厅", path: "/postWeb"},
    {id: 3, label: "活动广场", path: "/activityWeb"},
    {id: 4, label: "社区市场", path: "/commodityWeb"},
    {id: 5, label: "游戏信息库", path: "/gameWeb"}
])


const menuListUser = ref([
    {id: 1, label: "登录", path: "/", hid: false},
    {id: 2, label: "注册", path: "/", hid: false},
    {id: 3, label: "个人中心", path: "/", hid: true}
])









</script>

<style lang="less" scoped>

.bottom-font {
  text-align: center;
  padding: 10px;
}
.bottom-info {
  background-color: gainsboro;
  height: 120px;
}
.demo-basic {
    text-align: center;
}
.demo-basic .sub-title {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--el-text-color-secondary);
}
.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.demo-basic .block:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
    flex: 1;
}
.demo-basic .el-col:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
}


.mainLayout {
    background: red;
}

.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}

body > .el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}

</style>